<template>
	<!-- <keep-alive> -->
	<view class="page-apply-wrapper">
		<image class="header-bg" src="https://d-gangzhong.bigchun.com/uploads/20240803/337088887403f6f34719707a0b36db55.png"></image>
		<view class="apply-content">
			<view class="apply-form-wrapper">
				<view class="apply-form">
					<up-form labelPosition="top" :model="model1" :rules="rules" ref="uFormRef">
						<view class="apply-form-section">
							<view class="serve-item-header">
								<text class="head-b"></text>
								<text class="item-tit">公司名称</text>
							</view>
							<up-form-item required label="中文:" borderBottom prop="business_name_cn" ref="item1" labelWidth="auto">
								<up-input v-model="model1.business_name_cn" border="none" placeholder="请输入"></up-input>
							</up-form-item>
							<up-form-item required label="英文:" borderBottom prop="business_name_en" ref="item1" labelWidth="auto">
								<up-input v-model="model1.business_name_en" border="none" placeholder="请输入"></up-input>
							</up-form-item>
						</view>
						<view class="apply-form-section">
							<view class="s-flex-r-b-c">
								<view class="serve-item-header" style="margin-bottom: 0;">
									<text class="head-b"></text>
									<text class="item-tit">董事股东身份证</text>
								</view>
								<up-icon @click="holder_json.push({})" name="plus-circle" color="#333333"
									size="24"></up-icon>
							</view>
							<view class="edu-list"> 
								<view class="edu" @click="go(`addEducation?form=${JSON.stringify(item)}`)"
									v-for="(item,index) in holder_json" :key="index">
									<view class="boxName">
										股东{{index+1}}
									</view>
									<up-form-item label="姓名:" borderBottom prop="holder_name" labelPosition="left" ref="item1" labelWidth="auto">
										<up-input v-model="holder_json[index].holder_name" border="none" placeholder="请输入"></up-input>
									</up-form-item>
									<up-form-item label="身份证号:" borderBottom prop="holder_idCard_no" labelPosition="left" ref="item1" labelWidth="auto">
										<up-input v-model="holder_json[index].holder_idCard_no" border="none" placeholder="请输入"></up-input>
									</up-form-item>
									<up-form-item label="身份证图片:" borderBottom prop="holder_idCard_no" labelPosition="top" ref="item1" labelWidth="auto">
										<view style="display: flex;justify-content: space-between;width: 100%;">
											<uploadFile tag="1" @uploadSucess="e=>item.idCardFile_z=e" :img="holder_json[index].idCardFile_z" :id="id"></uploadFile>
											<uploadFile tag="2" @uploadSucess="e=>item.idCardFile_f=e" :img="holder_json[index].idCardFile_f" :id="id"></uploadFile>
										</view>
									</up-form-item>
								</view>
							</view>
						</view>
						<view class="apply-form-section">
							<view class="serve-item-header">
								<text class="head-b"></text>
								<text class="item-tit">地址证明</text>
							</view>
							<up-form-item label="身份证图片:" borderBottom prop="holder_idCard_no" labelPosition="top" ref="item1" labelWidth="auto">
								<uploadFile tag="3" @uploadSucess="e=>model1.address_img=e" :img="model1.address_img" :id="id"></uploadFile>
							</up-form-item>
						</view>
						<view class="apply-form-section">
							<view class="serve-item-header">
								<text class="head-b"></text>
								<text class="item-tit">注册资本</text>
							</view>
							<up-form-item required label="注册资本:" borderBottom prop="regist_money" ref="item1" labelWidth="auto">
								<up-input v-model="model1.regist_money" border="none" placeholder="请输入">
									<template #suffix>
										<text>万元</text>
									</template>
								</up-input>
							</up-form-item>
						</view>
						<view class="apply-form-section">
							<view class="s-flex-r-b-c">
								<view class="serve-item-header" style="margin-bottom: 20rpx;">
									<text class="head-b"></text>
									<text class="item-tit">股份比例</text>
								</view>
								<up-icon @click="share_rate_json.push({})" name="plus-circle" color="#333333"
									size="24"></up-icon>
							</view>
							<view class="edu-list">
								<view class="edu" @click="go(`addEducation?form=${JSON.stringify(item)}`)"
									v-for="(item,index) in share_rate_json" :key="index">
									<view class="boxName">
										股东{{index+1}}
									</view>
									<up-form-item label="股东:" borderBottom prop="share_name" labelPosition="left"  ref="item1" labelWidth="auto">
										<up-input v-model="share_rate_json[index].share_name" border="none" placeholder="请输入"></up-input>
									</up-form-item>
									<up-form-item label="持股比例:" borderBottom prop="share_rate" labelPosition="left"  ref="item1" labelWidth="auto">
										<up-input v-model="share_rate_json[index].share_rate" border="none" placeholder="请输入"></up-input>
									</up-form-item>
								</view>
							</view>
						</view>
						<view class="apply-form-section">
							<view class="serve-item-header">
								<text class="head-b"></text>
								<text class="item-tit">注册地址</text>
							</view>
							<up-form-item label="注册地址:" borderBottom prop="regist_address" ref="item1" labelWidth="auto">
								<up-input v-model="model1.regist_address" border="none" placeholder="请输入"></up-input>
							</up-form-item>
						</view>
						<view class="apply-form-section">
							<view class="serve-item-header">
								<text class="head-b"></text>
								<text class="item-tit">业务范围</text>
							</view>
							<up-form-item label="业务范围:" borderBottom prop="business_scope" ref="item1" labelWidth="auto">
								<up-input v-model="model1.business_scope" border="none" placeholder="请输入"></up-input>
							</up-form-item>
						</view>
						<view class="apply-form-section">
							<view class="serve-item-header">
								<text class="head-b"></text>
								<text class="item-tit">法定秘书</text>
							</view>
							<up-form-item label="姓名:" borderBottom prop="legal_secretary_name" labelPosition="left" ref="item1" labelWidth="auto">
								<up-input v-model="model1.legal_secretary_name" border="none" placeholder="请输入"></up-input>
							</up-form-item>
							<up-form-item label="联系方式:" borderBottom prop="legal_secretary_mobile" labelPosition="left" ref="item1" labelWidth="auto">
								<up-input v-model="model1.legal_secretary_mobile" border="none" placeholder="请输入"></up-input>
							</up-form-item>
						</view>

					</up-form>

				</view>
			</view>

		</view>
		<view class="apply-btn-wrapper" v-if="!id">
			<view class="apply-btn" @click="handleSave">
				<text>保存</text>
			</view>
		</view>
	</view>
	<!-- </keep-alive> -->
</template>

<script setup name="apply">
	import customNav from '@/components/custom-nav.vue'
	import uploadFile from './uploadFile.vue'
	import {
		ref,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	const holder_json = ref([{}])
	const share_rate_json = ref([{}])
	const id = ref("")
	const uFormRef = ref(null);
	onLoad((e) => {
		if (e && e.id) {
			id.value = e.id
			getDetails()
		}
	})
	const rules = {
		'business_name_cn': [{
			required: true,
			message: '请输入中文公司名称',
			trigger: ['blur', 'change'],
		}],
		'business_name_en': [{
			required: true,
			message: '请输入英文公司名称',
			trigger: ['blur', 'change'],
		}],
	}
	const model1 = ref({
		business_name_cn:""

	}) // 获取项目详情
	function getDetails() {
		proxy.$request({
			url: 'api/User/getMyApplyDetail',
			header: "application/x-www-form-urlencoded",
			data: {
				order_id: id.value
			}
		}).then(res => {
			model1.value = res.data
			if (res.data.holder_json) {
				holder_json.value = res.data.holder_json
			}
			if (res.data.share_rate_json) {
				share_rate_json.value = res.data.share_rate_json
			}
			model1.value.sex = res.data.sex + ''
		})
	}
	function handleSave() {
		model1.value.holder_json=JSON.stringify(holder_json.value)
		model1.value.share_rate_json=JSON.stringify(share_rate_json.value)
		uFormRef.value.validate().then(valid => {
			if (valid) {
				proxy.$request({
					url: 'api/Service/applyStartBusiness',
					header: "application/x-www-form-urlencoded",
					data: {...model1.value,service_id:4}
				}).then(res => {
					if (res.code == 0) {
						return proxy.$toast(res.msg)
					} else {
						proxy.$toast(res.msg)
						setTimeout(()=>{
							uni.switchTab({
								url:"/pages/serve/serve"
							})
						},1500)
					}
				})
			} else {
				uni.$u.toast('校验失败')
			}
		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('校验失败')
		});
	}
</script>
<style lang="scss" scoped>
	.flex-r {
		width: 100%;
		display: flex;

		::v-deep .u-radio-row {
			justify-content: flex-end !important;
		}

		::v-deep .u-radio-group {
			justify-content: flex-end !important;
		}
	}

	.header-bg {
		width: 750rpx;
		height: 162rpx;
	}

	.page-apply-wrapper {
		background: #f8f8ff;

		.apply-header {
			position: relative;

			.header-bg {
				width: 100%;
				height: 482rpx;
			}

			.apply-head_info {
				position: absolute;
				display: flex;
				top: 200rpx;
				justify-content: center;
				width: 100%;
				align-items: center;

				.flow-line {
					height: 1rpx;
					width: 170rpx;
					// background: #fff;
					border-top: 4rpx dashed #FF7139;
				}

				.flex-act {
					text {
						color: #333 !important;
					}
				}

				.flow-item {

					// position: relative;



					.flow-step {
						// background: #FFFFFF;
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
					}

					text {
						position: absolute;
						margin-left: -30rpx;
						margin-top: 10rpx;
						font-size: 25rpx;
						color: #666;
					}
				}
			}
		}

		.apply-form-section {
			background: #fff;
			margin-top: 20rpx;
			// border-bottom: 20rpx solid #f8f8f8;
			padding: 32rpx;

			.edu-list {
				margin-top: 20rpx;

				.edu {
					.boxName{
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						line-height: 76rpx;
						margin-bottom: 10rpx;
					}
					
					.edu-row1 {
						height: 92rpx;

						.edu {
							font-size: 32rpx;
							color: #000000;
							line-height: 38rpx;
							text-align: left;
						}

						.time {
							font-size: 24rpx;
							color: #999999;
							line-height: 28rpx;
						}
					}

					.edu-row2 {
						font-size: 24rpx;
						color: #666666;
						line-height: 28rpx;
					}
				}
			}
		}

		.apply-content {
			position: relative;
			background: #f8f8ff;
			padding-bottom: 100rpx;

			.apply-form {
				padding-bottom: 60rpx;
				background: #f8f8f8;
				border-radius: 20rpx;
			}

			.apply-form-step1 {
				margin: 10rpx;
			}

			.apply-form-step2 {
				margin-top: 30rpx;
				padding-bottom: 90rpx;
			}

			.serve-item-header {
				margin-bottom: 20rpx;

				.head-b {
					display: inline-block;
					width: 12rpx;
					height: 24rpx;
					background: #FF7139;

				}

				.item-tit {
					color: #333333;
					font-weight: bold;
					font-size: 32rpx;
					margin-left: 16rpx;
				}

			}
		}

		.apply-btn-wrapper {
			position: fixed;
			bottom: 0;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 200rpx;
			z-index: 10;

			.apply-btn {
				background: linear-gradient(128deg, #FF9839 0%, #FF7139 100%);
				color: #fff;
				width: 686rpx;
				margin: 0 auto;
				height: 96rpx;

				border-radius: 200rpx;

				text-align: center;
				font-size: 32rpx;

				line-height: 96rpx;
			}

			// background: rgba(0,0,0,);
		}


	}
</style>